<template>
	<view class="page">
		<view class="p-logo flex-row align-center justify-center">
			<image src="/static/logo.png" mode="aspectFill" class="img"></image>
			<!-- <span class="txt">闪电租车</span> -->
		</view>
		<view class="p-form">
			<view class="c-item align-center">
				<view class="i-inpt">
				   <input type="number" class="inpt" placeholder="请输入您的手机号码" v-model="data.mobile"/>
			    </view>
			</view>
			
			<view class="c-item align-center">
				<view class="i-inpt">
					<input type="number" class="inpt" placeholder="请输入验证码" v-model="data.captcha"/>
				</view>
				<view class="code-wrap" @tap="chgeCode">
					<phoneCode ref="codeRef" :mobile="data.mobile" event="register" />
				</view>
			</view>
		</view>
		<submit-btn @submit="submit" ref="submitRef" :isOnce="false">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					立即登录
				</view>
			</template>
		</submit-btn>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue";
	import phoneCode from './components/phoneCode.vue'
	import { onLoad} from "@dcloudio/uni-app";
	const data = reactive({
		captcha:'',
		mobile:'',
		// introcode:'', //邀请码
	})
	onLoad((e)=>{
		/**
		 * 经二维码分享最大32个可见字符
		*/
		// if(e.scene){
		// 	const scene = decodeURIComponent(e.scene);
		// 	data.introcode = scene;
		// }
	})
	const codeRef:any = ref();
    const chgeCode = ()=>{
		codeRef.value.getCode();
	}
	const submitRef = ref();
	const submit= async ()=>{
		if(! uni.$tools.match( data.mobile,'mobile')){
		    return;
		}
		if(! uni.$tools.match( data.captcha,'code')){
		    return;
		}
		const sendData={
			mobile:data.mobile,
			captcha:data.captcha,
			// introcode: data.introcode,
		}
		let res = await uni.$request('user.login',sendData);
		submitRef.value.chgeStatus();
		let userinfo = res.data.userinfo;
		let token =  userinfo.token;
		uni.setStorageSync("token",token);
		uni.$store.dispatch('user/getinfo')
		if(userinfo.status === 1){
			//通过
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.navTo('/pages/index/index',{},{type:"replaceAll"})
			},800)
		}else{
			uni.$this.navTo('/pages/login/apply')
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding: 150rpx 40rpx 0;
}
.p-logo{
	// height: 94rpx;
	.img{
		// width: 77rpx;
		// height: 94rpx;
		width: 166rpx;
		height: 138rpx;
		// margin-right: 25rpx;
	}
	// .txt{
	// 	font-size: 48rpx;
	// 	color: #333333;
	// 	font-weight: bold;
	// }
}
.p-form{
	width: 100%;
	margin-bottom: 110rpx;
	background-color: #fff;
	margin-top: 100rpx;
	.c-item{
		width: 100%;
		height: 100rpx;
		border-bottom: 2rpx solid #eee;
	}
	.i-inpt{
		flex:1;
		.inpt{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			color:#333;
			font-size: 28rpx;
		}
		.phone-code{
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 26rpx;
			color: $base-color;
		}
	}
	// .i-code{
	// 	width: 180rpx;
	// 	height: 70rpx;
	// }

}
.p-btn{
	margin: 0 auto;
	width: 670rpx;
	height: 84rpx;
	background: $base-color;
	border-radius: 10rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	&.disabled{
		background-color: #eee;
	}
}
</style>

